<template>
    <div>
        <loading loadingStyle="height: 400px" v-if="!userInfo"></loading>
        <section class="userMsg" v-else>
            <header>
                个人资料
            </header>
            <div class="userMsgContent clearfix">
                <div class="contentLeft">
                    <p>
                        <label>账号：</label>
                        <span>{{userInfo.data.mobile}}</span>
                    </p>
                    <p>
                        <label>昵称：</label>
                        <input type="text" @change="userNameChange" :placeholder="userInfo.data.name">
                       <!--  <input v-model="name" placeholder="昵称"
                            v-validate data-vv-rules="required|max:7" data-vv-as="昵称"
                            id="name" type="text" class="form-control" name="name" required>
                        <span class="help-block" v-show="errorBags.has('name')">{{errorBags.first('name')}}</span> -->
                    </p>
                    <p>
                        <label>自我介绍</label>
                        <textarea @change="userIntroduceChange" :placeholder="userInfo.data.sign"></textarea>
                    </p>
                    <p class="confirmModify">
                        <el-button type="warning" @click="editMsg">确认修改</el-button>
                    </p>
                </div>
                <div class="contentRight">
                    <p>头像</p>
                    <div class="userImgBox">
                        <!-- <div class="userTitleImg"><img :src="userImg"></div> -->
                        <div class="modifyBtn">
                            <div class="form-group aetherupload-wrapper"><!--组件最外部需要有一个名为aetherupload-wrapper的id，用以包装组件-->
                                    <div class="angleBox userTitleImg">
                                        <div class="userTitleImg"><img :src="userInfo.data.avatar"></div>
                                    </div>
                                    <input type="file" class="uploadeModeFile file" onchange="aetherupload(this,'avatar').success(someCallback).upload()" accept="image/jpeg,image/jpg,image/png"><!--需要有一个名为file的id，用以标识上传的文件，aetherupload(file,group)中第二个参数为分组名，success方法可用于声名上传成功后的回调方法名-->
                                    
                                    <!-- <span style="font-size:12px;color:#aaa;" id="output"></span>需要有一个名为output的id，用以标识提示信息 -->
                                    <input type="hidden" name="file1" class="savedpath imageName1" id="userImg"><!--需要有一个名为savedpath的id，用以标识文件保存路径的表单字段，还需要一个任意名称的name-->
                                  
                            </div>
                            <button>点击修改</button>
                        </div>
                    </div>
                </div>
            </div>
            <footer>
                <p>
                    提醒：请勿上传违反国家法律法规及其他敏感信息。
                </p>
            </footer>
        </section>
        
    </div>
</template>
<script>
import loading from '../../loading'
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
export default {
    name : "userMsg",
    data(){
        return {
            msg : "个人资料",
            userName : "",
            newUserName : "",
            userImg :"",
            userIntroduce : "",
            newUserIntroduce : "",
            userInfo : null,
        }
    },
    methods: {
        ...mapMutations([//axios中的方法
            "nameChange"
        ]),
        successPoint(msg) {//注册成功的提示
            this.$message({
                message: '恭喜你，'+msg,
                type: 'success',
                customClass : "sucPoint",
                duration : 1000,
                showClose : true,
            });
        },
        userNameChange(e){
            this.newUserName = e.target.value;
        },
        userIntroduceChange(e){
            this.newUserIntroduce = e.target.value;
        },
        errorPoint(msg) {//失败的提示
            this.$message({
                message: '对不起，'+msg,
                type: 'error',
                customClass : "sucPoint",
                duration : 1000,
                showClose : true,
            });
       },
        editMsg(){
            let formData = {
                    name:this.newUserName,
                    sign:this.newUserIntroduce,
                    avatar:$("#userImg").val()
                };
            axios.post('/updateinfo',formData).then(response => {
                    this.nameChange(this.userName);
                    this.successPoint("修改成功")
            }).catch(error=>{
                if(error.response.data.errors.name){
                    this.errorPoint(error.response.data.errors.name[0])
                }else if(error.response.data.errors.sign){
                    this.errorPoint(error.response.data.errors.sign[0])
                }
            })
        },
    },
    components:{
        loading
    },
    created() {
        axios.get("/userinfo/getuser").
        then(response=>{
            this.userInfo = response.data;
            this.userName = this.userInfo.data.name;
            this.userIntroduce = this.userInfo.data.sign;
        }).catch(error=>{
            console.log(error,"00")
        })
    },
}
</script>
<style scope>
    .userMsg{
        height: 627px;
        background: #fff;
    }
    .userMsg header{
        font-size: 16px;
        line-height: 66px;
        padding-left: 38px;
        border-bottom: 1px solid #dddddd;
        font-weight: bold;
    }
    .userMsgContent{
        padding-top: 10px;
    }
    .contentLeft{
        float: left;
        padding-left: 34px;
    }
    .contentLeft label{
        display: inline-block;
        font-size: 16px;
        line-height: 40px;
        color: #3f3f3f;
        width: 84px!important;
        float: none;
    }
    .contentLeft input{
        padding-left: 9px;
        color: #a3a3a3;
        border: 1px solid #dddddd;
        outline: none;
        width: 324px;
        height: 36px;
        font-size: 14px;
        line-height: 36px;
        box-sizing: border-box;
    }
    .contentLeft textarea{
        width: 324px;
        height: 104px;
        color: #a3a3a3;
        resize:none;
        outline: none;
        font-size: 14px;
        line-height: 22px;
        padding: 10px 7px 5px 7px;
        border: 1px solid #dddddd;
        box-sizing: border-box;
        margin-top: 26px;
        vertical-align: middle;
    }
    .confirmModify{
        padding-left: 89px;
        margin-top: 80px;
    }
    .userMsg .confirmModify{
        margin-top: 20px;
    }
    .contentRight{
        float: right;
        width: 347px;
    }
    .contentRight p{
        font-size: 16px;
        line-height: 40px;
        color: #3c3c3c; 
    }
    .userImgBox{
        padding-left: 52px;
    }
    .userTitleImg img{
        display:block;
        width: 110px;
        height: 110px;
    }
    .modifyBtn{
        position:relative;
    }
    .modifyBtn .form-group{
        margin: 0;
    }
    .modifyBtn input{
        position:absolute;
        width: 111px;
        height: 24px;
        opacity: 0;
        bottom: 0px;
        outline: none;
    }
    .modifyBtn button{
        width: 111px;
        height: 24px;
        background: #f6f6f6;
        padding: 0;
        color: #a3a3a3;
        border: 1px solid #dddddd;
        margin-top: 13px;
        outline: none;
    }
    .userMsg footer{
        font-size: 12px;
        line-height: 18px;
        color: #d7d4d4;
        padding: 28px 0 0 115px;
        border-top: 1px solid #dddddd;
        margin-top: 106px;
    }
    .userMsg .confirmModify .el-button--warning{
        background-color: #ea514b;
        border-color: #ea514b;
    }
</style>